<!DOCTYPE html>
<html>
    <head>
        <title>Render to Texture : Conway game of life</title>
        <meta charset='utf-8'/>
        
        <script type='text/javascript' src='scriptGPU.js'></script>
        <script type='text/javascript' src='scriptCPU.js'></script>
        
        <style type='text/css'>
            body {
                background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
            }
            #content {
                width: 960px;
                margin-left: auto;
                margin-right: auto;        
                background: #eee;
                padding: 1em;
            }
            canvas {
                display: block;
                margin-left: auto; margin-right: auto;
            }
        </style>
    </head>
    <body onload='main_GPU()'>
        <div id='content'>
            <h1>Conway game of life</h1>
            <p>
            We simulate a Conway game of life for 2000 iteration. Regular shapes emerge from random values. We have to use render to texture to update the texture storing cell states at each iteration. This is a discrete simulation (each cell is either alive or dead), so we do not need floating point textures.
            </p>
            <canvas id='myWebGLCanvas' height='512' width='512'></canvas><br/>
            <button onclick='main_CPU()'>Do the same simulation on CPU</button><br/>
            <a href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life' target='_blank'>About the Conway game of life</a><br/>
            <p>
            Open the web console to view the benchmarks.
            </p>
        </div>
    </body>
</html>

